<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../day34/jquery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <button>按钮一</button>
      <button>按钮二</button>
      <button>按钮三</button>
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
    </div>
    <script>
      //   let btn1 =  document.querySelector("button");
      //   console.log(btn1);
      //     // 把原生对象通过jq方法包裹一下

      // //    console.log( $(btn1));
      // $(btn1).css("background","red");
      // btn1.click(function(){
      //     console.log(1111);
      // })
      // btn1.css("color","red");

      // $("button").css()

      //    console.log(  $("button"));

      // $(".container button").click(function(){
      //     // console.log(11);
      //     // console.log(this);
      //     // let index = $(".container button").index($(this));
      //     // console.log(index);
      //     $(".container div").css("display","none").eq($(".container button").index($(this))).css("display","block");

      // })

      $(".container button").click(function () {
        $(".container div")
          .css("display", "none")
          .eq($(".container button").index($(this)))
          .css("display", "block");
      });
    </script>
  </body>
</html>
